<template>
	<p>msg:{{msg}}</p>
	<input type="text" value="原始数据" />
	<br />
	<input type="text" v-model="msg" />
	<br />
	<input type="text" v-model.number="n1"  /> + <input type="text" v-model.number="n2"  /> = {{n1+n2}}
	<p>请问你喜欢什么类型的汽车</p>
	<select v-model="likecar">
		<option value="本田">本田</option>
		<option value="小米苏7">小米苏7</option>
		<option value="劳斯莱斯">劳斯莱斯</option>
	</select>
	<br />
	<input type="radio" name="sex" value="man" v-model="gender" />男
	<input type="radio" name="sex" value="felman"  v-model="gender" />女
	<br />
	<p>你喜欢的是：{{likecar}}</p>
	<p>你的性别是：{{gender}}</p>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	//v-model指令来实现双向数据绑定，使用它可以在input、textarea和select元素上创建双向数据绑定
	//它会根据使用的元素自动选取对应的属性和事件组合，负责监听用户的输入事件并更新数据。
	//v-model内部会为不同的元素绑定不同的属性和事件，具体如下。
	//textarea元素和text类型的input元素会绑定value属性和input事件。
	//checkbox类型的input元素和radio类型的input元素会绑定checked属性和change事件。
	//select元素会绑定value属性和change事件。
	
	//定义响应式数据
	const msg=ref('请输入你喜欢的汽车类型')
	const n1=ref(100)
	const n2=ref(2000)
	const likecar=ref('')
	const gender=ref('') //性别
	
</script>

<style>
</style>